<script lang="ts" setup>
import { OrderStatus } from '@/constants/orders';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();

defineProps<{
  orderSn?: string;
  orderStatus?: string;
}>();

defineEmits<{
  command: [type: string];
}>();
</script>

<template>
  <view class="booking-bottom-bar">
    <view class="flex justify-end items-center py-3 px-4">
      <!-- 待支付 -->
      <template v-if="orderStatus === OrderStatus.WAIT_PAY">
        <view class="booking-bottom-bar__btn" @click="$emit('command', 'CANCEL_ORDER')">
          {{ t('tripCancelOrder') }}
        </view>
        <view class="ml-2 booking-bottom-bar__btn is-pay" @click="$emit('command', 'PAY_ORDER')">
          {{ t('LRKey_payNow') }}
        </view>
      </template>
      <!-- 预订成功，待入住 -->
      <template v-else-if="orderStatus === OrderStatus.HAVE_PAID">
        <view
          class="booking-bottom-bar__btn is-cancel-booking"
          @click="$emit('command', 'CANCEL_BOOKING')"
        >
          {{ t('LOKey_cancelReservation') }}
        </view>
      </template>
      <!-- 其他 -->
      <view v-else class="booking-bottom-bar__btn" @click="$emit('command', 'REORDER')">
        {{ t('DiningPreOrderBookAgain') }}
      </view>
    </view>
    <apt-safe-area />
  </view>
  <view class="h-10"></view>
</template>

<style>
.booking-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
}

.booking-bottom-bar__btn {
  padding: 16rpx 32rpx;
  background-color: #fff;
  border: 1rpx solid #c4c4c4;
  border-radius: 282rpx;
  font-size: 24rpx;
  line-height: 34rpx;
  color: #3d3d3d;
}

.booking-bottom-bar__btn.is-cancel-booking {
  color: #d13820;
}

.booking-bottom-bar__btn.is-pay {
  background-color: #269c74;
  border-color: #269c74;
  color: #fff;
}
</style>
